<!DOCTYPE HTML>
<html>
	<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>${title}</title>
		<link rel="stylesheet" type="text/css" href="${baseRef}/styles/winbookwall.css"  />

		<script type="text/javascript" src="${baseRef}/scripts/jquery.js">
		</script>
		<script type="text/javascript" src="${baseRef}/scripts/autogrow.js">
		</script>
		<script type="text/javascript" src="${baseRef}/scripts/mColorPicker/javascripts/mColorPicker.js">
		</script>
		<script type="text/javascript" src="${baseRef}/scripts/jQLabel/jqlabel.js">
		</script>
		<script type="text/javascript" src="${baseRef}/scripts/json2.js">
		</script>
		
		<script type="text/html" id="winConditionTemplate">
			<li	class="post wincondition" data-winbook-wcStatus="open" data-winbook-wcid="<%= wcid %>">
				<a name="delete">
				<img class="hoverButton deleteButton" src="${baseRef}/images/deleteredicon.png"/>
				</a>
				<a href="#edit">
				<img class="hoverButton editButton" src="${baseRef}/images/editpencil.png"/>
				</a>
				<div class="checkbox">
					<input type="checkbox">
				</div>
				<div class="postContainer">

					<div class="avatarColumn">
						<a href="#">
						<img src="<%= avatar %>"/>
						<!-- Need to add author's avatar's url-->
						</a>
						<div class="authorName">
							<a href="#"><%= displayName %></a>
						</div>
					</div>
					<div class="postDetailsContainer">
						<ul class="postDetails">

							<li>
								<ul class="categorizationDetails">
									<li class="wcid">
										Win Condition (WC_<%= wcid %>):
									</li>
									
								</ul>
							</li>
							<div class="clear">
							</div>
							<li class="postData">
								<%= text %>
							</li>
							<li>
								<ul class="actionsNavBar">
									<li>
										<a href="#" class="actionNavBarLink">Agree</a>
										<span class="dotSeparator">.</span>
									</li>
									<li>
										<a href="#" class="actionNavBarLink">Comment</a>
										<span class="dotSeparator">.</span>
									</li>
									<li>
										<a href="#" class="actionNavBarLink">Raise Issue/Concern/Risk</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<div class="clear">
				</div>
			</li>					
		</script>
		
		<!-- Template of the input form(s) for either Issue, option or comment-->
		<script type="text/html" id="dataFormTemplate">
			<li class="post <%= contentType %> dataForm" data-winbook-contentType="<%= contentType %>">
				<div style="display:none;" class="hoverMenu">
					<a name="delete">
						<img class="hoverButton deleteButton" src="${baseRef}/images/deleteredicon.png"/>
					</a>
					<a href="#edit">
						<img class="hoverButton editButton" src="${baseRef}/images/editpencil.png"/>
					</a> 
				</div>
				<div class="postContainer">
		
					<div class="avatarColumn">
						<a href="#">
							<img src="<%= avatar %>"/>
						</a>
						<div class="authorName">
							<a href="#"><%= displayName %></a>
						</div>
					</div>
					<div class="postDetailsContainer">
						<div class="dataPostArea">
							<textarea class="dataForm" style="float:left; min-height:60px; min-width:330px; resize:none; margin:2px; margin-bottom:5px;" name="data">
							</textarea>
							<button class="addDataButton"    style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;">
								Add <%= contentTypeButtonText %>
							</button>
							<button class="cancelDataButton" style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;">
								Cancel
							</button>
							<div class="clear"/>
								<span>10 characters left</span>
							</div>
						</div>
					</div>
					<div class="clear">
					</div>
			</li>
		</script>
		
		
			
		<script type="text/javascript">
		
		/******************Begin Microtemplate Engine**********************/
		// Simple JavaScript Templating
		// John Resig - http://ejohn.org/ - MIT Licensed
		(function() {
			var cache = {};
	
			this.tmpl = function tmpl(str, data) {
				// Figure out if we're getting a template, or if we need to
				// load the template - and be sure to cache the result.
				var fn = !/\W/.test(str) ?
				cache[str] = cache[str] ||
				tmpl(document.getElementById(str).innerHTML) :
	
				// Generate a reusable function that will serve as a template
				// generator (and which will be cached).
				new Function("obj",
				"var p=[],print=function(){p.push.apply(p,arguments);};" +
	
				// Introduce the data as local variables using with(){}
				"with(obj){p.push('" +
	
				// Convert the template into pure JavaScript
				str.replace(/[\r\t\n]/g, " ")
				.replace(/'(?=[^%]*%>)/g,"\t")
				.split("'").join("\\'")
				.split("\t").join("'")
				.replace(/<%=(.+?)%>/g, "',$1,'")
				.split("<%").join("');")
				.split("%>").join("p.push('")
				+ "');}return p.join('');");
				// Provide some basic currying to the user
				return data ? fn(data) : fn;
			};
		})();
		/*******************End Microtemplate Engine**********************/
		
		
		
		//JQuery's Ready function:
		$(document).ready( function() {
			//handle clicks on the actions nav bar
			$('.actionNavBarLink').live('click', function(){
				actionNavBarHandler($(this));
			});
			
			//Cancel event for the issue/option/comment dialog:
			$('.cancelDataButton').live('click', function(){
			
			var node = $(this).parents('li:eq(0)');
			node.fadeOut("fast",function(){
				node.remove();
			});
			
		});
			
			
			//enable text area for autoresize
			configTextArea();
	
			//draw labels
			$(".category").jQLabel();
			$.fn.mColorPicker.init.replace = false;
	
			//instantiate color picker
			$("input#categoryColor").mColorPicker({
				imageFolder:'${baseRef}/images/mColorPicker/'
			});
	
			//send win condition to server
			$('#postwincondition').bind('click', function() {
	
				var wincondition = $('#wincondition').val();
				var wallName = $('#wallName').val();
				var postData = "wincondition="+wincondition+"&"+"wall="+wallName;
	
				$.ajax({
					type:"POST",
					url: "WinCondition",
					username: "nkukreja@usc.edu",
					password: "nkukreja",
					data:postData,
					dataType:"json",
					success:addNewWinCondition
	
				});
	
				$('#wincondition').attr('disabled',true);
				$('#postwincondition').attr('disabled',true);
			});
			
			//capture event to delete win condition and perform ajax request for the same.
			$('a[name="delete"]').live('click', function() {
	
				var wcidToDelete = $(this).parent().data("winbook-wcid");
				var wallName = $('#wallName').val();
	
				var deleteData = {"wcid":wcidToDelete, "action":"delete",wall:wallName};
				//alert("Delete Win Condition id:"+wcidToDelete);
	
				$.ajax({
					type:"DELETE",
					url:"WinCondition",
					username:"nkukreja@usc.edu",
					password:"nkukreja",
					contentType:"application/json; charset=utf-8",
					data:JSON.stringify(deleteData),
					success: function(result, status) {
						deleteWinCondition(result, status, wcidToDelete)
					}
				});
			});
		});
		
		
		function deleteWinCondition(result, status, wcid) {
			
			$('[data-winbook-wcid='+wcid+']').fadeOut("slow", function() {
				$(this).remove();
			});
		}
	
		function addNewWinCondition(result, status) {
			
			content = $('#wincondition').val();
			userDisplayName = $('#userDisplayName').val();
			userAvatar = $('#userAvatar').val();
	
			var newWinCondition = tmpl("winConditionTemplate", {wcid:result.wcid, text:content, displayName:userDisplayName, avatar:userAvatar});
	
			$('.listOfPosts').children(':first').before(newWinCondition);
	
			$('#wincondition').attr('disabled',false);
			$('#postwincondition').attr('disabled',false);
			textAreaDefault($('#wincondition'));
	
		}
	
		function configTextArea() {
			$('textarea#wincondition').autoResize({
			animate:false,
			extraSpace:0
	
			});
	
			textAreaDefault($('#wincondition'));
	
			$('textarea#wincondition').focus( function() {
	
			$(this).text('');
			$(this).css("color","black");
			$('#postwincondition').attr('disabled',false);
	
			} );
			$('textarea#wincondition').blur( function() {
	
			var text = $(this).val();
	
			if(text=="") {
				textAreaDefault($(this));
				}
			});
			}// end configTextArea()
	
		function textAreaDefault(textarea) {
			var defaultText = "Enter your Win Condition/Requirement/Expectation here...";
			$(textarea).text('');
			$(textarea).text(defaultText);
			$(textarea).css("color","gray");
			$('#postwincondition').attr('disabled',true);
	}

	function actionNavBarHandler(actionLink) {
		
		var action = actionLink.data("winbook-action");

		userDisplayName = $('#userDisplayName').val();
		userAvatar = $('#userAvatar').val();
		var formType;


		switch(action.toLowerCase()) {
			case "Issue".toLowerCase():
				formType="issue";
				break;

			case "Agree".toLowerCase():
				alert("Agree to WC/Option");
				break;

			case "Option".toLowerCase():
				formType="option";
				alert("Suggest Option");
				break;

			case "Comment".toLowerCase():
				formType="comment";
				alert("Add Comment");
				break;

			case "Disagree".toLowerCase():
				alert("Disagreement expressed");
				break;

			case "CloseIssue".toLowerCase():
				alert("This issue is to be close");
				break;
		}
		
		buttonText = formType.charAt(0).toUpperCase() + formType.slice(1);
		
		var dataForm = tmpl("dataFormTemplate",{displayName:userDisplayName, avatar:userAvatar, contentType:formType, contentTypeButtonText:buttonText});
		
		var currentWinConditionNode = actionLink.parents('li.wincondition');
		var wcid = currentWinConditionNode.data("winbook-wcid");
		
		var nextNode = currentWinConditionNode.next();
		
		if(nextNode.is('li.wincondition'))
		{
			currentWinConditionNode.after('<li class="listOfIssues"><ul style="list-style-type:none; padding-left:30px;">'+dataForm+'</ul></li>');
		}
		
		else
		{
			var firstChildInIssueList = nextNode.find('ul>li:first-child');
			
			
			if(!firstChildInIssueList.hasClass("dataForm"))			
			{
				firstChildInIssueList.before(dataForm);
			}	 
			
			else if(firstChildInIssueList.hasClass("dataForm"))
				return;
			
			else
			{
				firstChildInIssueList.end().append(dataForm);
			}	 
				 
		}
		

	}
	
	
	function createIssueForm()
	{
		
	}


	function createCommentForm()
	{
		
	}
	
	
	function createOptionForm()
	{
		
	}
		</script>

		
		
	</head>
	<body>

		<div id="bluebar">
		</div>
		<div id="container">
			<div id="header">
				<h1 class="logo">Winbook</h1>
				<ul id="navbar" name="navbar">
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">Profile</a>
					</li>
					<li>
						<a href="#">Logout</a>
					</li>
				</ul>
			</div>
			<div id="leftColumn">
				<div class="clear">
					<div class="avatarColumn">
						<img src="${baseRef}/images/defaultavatar.jpg"/>
					</div>
					<div class="authorName">
						Nupul
						<br/>

						<a href="#">Edit my profile</a>
					</div>
				</div>
				<div class="clear">
				</div>
				<hr style="{height:1px; color:#3B5998;}"/>

				<ul class="leftMenu">
					<li class="header">
						Wall(s):
					</li>
					<li>
						Win Conditions
					</li>
					<li>
						Benefits
					</li>
					<li class="header">
						Actions
					</li>
					<li>
						View Equilibrium
					</li>
					<li>
						Prioritization
					</li>
				</ul>
			</div>
			<div id="main">
				<div id="postArea">
					
						<textarea name="wincondition" id="wincondition" >
						</textarea>
						<button id="postwincondition" disabled="true">
							Post
						</button> 
					
				</div>
				<div class="clear">
				</div>
				<ul class="listOfPosts">
					<#if winconditions?has_content>
					<#list winconditions as wc>

					<!-- Start of win condition Post-->
					<li class="post wincondition" data-winbook-wcStatus="${wc.status}" data-winbook-wcid="${wc.id}">
						<a name="delete">
						<img class="hoverButton deleteButton" src="${baseRef}/images/deleteredicon.png"/>
						</a>
						<a href="#edit">
						<img class="hoverButton editButton" src="${baseRef}/images/editpencil.png"/>
						</a>
						<div class="checkbox">
							<input type="checkbox">
						</div>
						<div class="postContainer">

							<div class="avatarColumn">
								<a href="#">
								<img src="${baseRef}/images/defaultavatar.jpg"/>
								<!-- Need to add author's avatar's url-->
								</a>
								<div class="authorName">
									<a href="#">${wc.author.displayName}</a>
								</div>
							</div>
							<div class="postDetailsContainer">
								<ul class="postDetails">

									<li>
										<ul class="categorizationDetails">
											<li class="wcid">
												Win Condition (WC_${wc.id}):
											</li>
											<li class="category">
												FR
											</li>
											<li class="category">
												Interface
											</li>
										</ul>
									</li>
									<div class="clear">
									</div>
									<li class="postData">
										${wc.winCondition}
									</li>
									<li>
										<ul class="actionsNavBar">
											<li>
												<a class="actionNavBarLink" data-winbook-action="Agree">Agree</a>
												<span class="dotSeparator">.</span>
											</li>
											<li>
												<a class="actionNavBarLink" data-winbook-action="Comment">Comment</a>
												<span class="dotSeparator">.</span>
											</li>
											<li>
												<a class="actionNavBarLink" data-winbook-action="Issue">Raise Issue/Concern/Risk</a>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
						<div class="clear">
						</div>
					</li>
					<!-- End of win condition post-->

					<#if wc.issues??>

					<li class="listOfIssues">		<!-- Begin list of issues -->
						<ul style="list-style-type:none; padding-left:40px;" data-winbook-issuesForWCId="${wcid}"> <!-- Nested list of issues -->

							<#list wc.issues as issue>

							<!-- Start of Issue Post -->
							<li class="post issue" data-winbook-issueStatus="" data-winbook-issueId="">
								<a name="delete">
								<img class="hoverButton deleteButton" src="${baseRef}/images/deleteredicon.png"/>
								</a>
								<a href="#edit">
								<img class="hoverButton editButton" src="${baseRef}/images/editpencil.png"/>
								</a>
								<div class="postContainer">

									<div class="avatarColumn">

										<a href="#">
										<img src="${baseRef}/images/defaultavatar.jpg"/>
										</a>
										<div class="authorName">
											<a href="#">${issue.author.displayName}</a>
										</div>
									</div>
									<div class="postDetailsContainer">
										<ul class="postDetails">

											<li class="issueid">
												Issue (Iss_${issue.id}):
											</li>
											<li class="postData">
												${issue.issue}
											</li>
											<li>
												<ul class="actionsNavBar">
													<li>
														<a class="actionNavBarLink" data-winbook-action="CloseIssue">Close Issue</a>
														<span class="dotSeparator">.</span>
													</li>
													<li>
														<a class="actionNavBarLink" data-winbook-action="Comment">Comment</a>
														<span class="dotSeparator">.</span>
													</li>
													<li>
														<a class="actionNavBarLink" data-winbook-action="Option">Suggest Option/Alternative(s)</a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
								<div class="clear">
								</div>
							</li>
							<!-- End of Issue Post -->

							<#if issue.options??>
							<li class="listOfOptions">	<!-- Begin list of options -->
								<ul style="padding-left:15px;" data-winbook-optionId="" data-winbook-optionsForIssue=""> <!-- Nested List of options-->
									
									<#list issue.options as option>

									<!-- Start of Option Post -->
									<li class="post option" data-winbook-optionStatus="">
										<a name="delete">
										<img class="hoverButton deleteButton" src="${baseRef}/images/deleteredicon.png"/>
										</a>
										<a href="#edit">
										<img class="hoverButton editButton" src="${baseRef}/images/editpencil.png"/>
										</a>
										<div class="postContainer">

											<div class="avatarColumn">
												<a href="#">
												<img src="${baseRef}/images/defaultavatar.jpg"/>
												</a>
												<div class="authorName">
													<a href="#">${option.author.displayName}</a>
												</div>
											</div>
											<div class="postDetailsContainer">
												<ul class="postDetails">

													<li class="optionid">
														Option (Opt_${option.id}):
													</li>
													<li class="postData">
														${option.option}
													</li>
													<li>
														<ul class="actionsNavBar">
															<li>
																<a class="actionNavBarLink" data-winbook-action="Agree">Agree</a>
																<span class="dotSeparator">.</span>
															</li>
															<li>
																<a class="actionNavBarLink" data-winbook-action="Comment">Comment</a>
															</li>
														</ul>
													</li>
												</ul>
											</div>
										</div>
										<div class="clear">
										</div>
									</li>
									<!-- End of option post -->

									</#list>
								</ul> <!-- End nested list of options for an issue-->
							</li> <!-- End outer bullet of nested options list-->
							</#if>	<!--End iteration for options-->

							</#list>
						</ul> <!-- End nested list of issues for win condition-->
					</li> <!-- End outer bullet of nested issues list-->
					</#if>	<!-- End iteration for issues-->

					</#list> <!-- End iteration for win conditions -->

					<!-- start of comment -->
					<!--
					<li class="post comment">

					<div class="postContainer">

					<div class="avatarColumn">
					<a href="#">
					<img src="${baseRef}/images/defaultavatar.jpg"/>
					</a>
					</div>
					<div class="postDetailsContainer">
					<ul class="postDetails">

					<li>
					<b>Nupul:</b> I'm making a comment just because I have too...
					</li>

					<br/>

					<li>
					<ul class="actionsNavBar">

					<li>
					<a href="#" class="actionNavBarLink">Comment</a>

					</li>

					</ul>
					</li>
					</ul>
					</div>
					</div>
					<div class="clear"></div>
					</li>
					-->
					<!-- end of comment -->

					<#else> <!-- Inform user about zero win conditions -->
					<li class="post" style="width:90%; margin-left:auto; margin-right:auto; color:gray;" id="infomessage">
						There are no win conditions for this project. Use the above text box to add a win condition(s)
					</li>
					</#if>
				</ul> <!-- End listOfPosts-->
			</div> <!-- End #main div -->
			<div id="rightColumn">
				<h4>Categories:</h4>
				<input type="text" id="categoryName"/>
				<input id="categoryColor" value="#3b5998" data-text="hidden" data-hex="true" style="{height:20px; width: 40px;}"/>
				<button id="createCategoryButton">
					Create Category
				</button>
				<ul class="categoryListing">
					<li>
						<button>
						</button> Category name
					</li>
				</ul>
			</div>
		</div>
		<input type="hidden" id="userDisplayName" value="Nupul Kukreja"/>
		<input type="hidden" id="userAvatar" value="${baseRef}/images/defaultavatar.jpg"/>
		<input type="hidden" id="wallName" value="${wall}"/>
	</body>
</html>
